<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <link rel="stylesheet" href="css/weui.css"/>
  <link rel="stylesheet" href="css/weuix.css"/>
  <link rel="stylesheet" href="css/style.css">

  <script src="js/common/zepto.min.js"></script>
  <script src="js/common/zepto.weui.js"></script>
  <script src="js/common/swipe.js"></script>
  <script src="js/common/common.js"></script>
  <script src="js/index.js"></script>
</head>
<body ontouchstart>
    <!-- 搜索栏目 -->
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" action="#">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" type="search">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
    <!-- 轮播图banner -->
    <div class="slide" id="slide2">
        <ul>
            <li>
                <a href="javascript:;">
                    <img src='images/banner.jpg' alt="">
                </a>

            </li>
            <li>
                <a href="javascript:;">
                    <img src='images/banner.jpg' alt="">
                </a>

            </li>
        </ul>
        <div class="dot">
            <span></span>
            <span></span>
        </div>
    </div>
    
    <div class="weui-flex fitment-plate pt_10">
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
    </div>
    <div class="weui-flex fitment-plate pd_10">
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
        <div class="weui-flex__item">
            <img src="images/pic_160.png" class="img-max">
            <p class="text">标题</p>
        </div>
    </div>

    <div class="weui-flex">
        <div class="weui-flex__item"><div class="placeholder">新品热销</div></div>
    </div>

    <div class="weui-feeds pd_2">
        <ul>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
        </ul>
    </div>

    <div class="weui-flex">
        <div class="weui-flex__item"><div class="placeholder">新品热销</div></div>
    </div>

    <div class="weui-feeds">
        <ul>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
            <li><span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span></li>
        </ul>
    </div>

    <div class="page-bd">
        <ul class="weui-mark">
            <li>
                <div class="weui-mark-img ">
                    <img src="images/pic.jpg">
                </div>
                <span class="weui-mark-rt bg-green">免费</span>
                <span class="weui-mark-lb">更新到101集</span>
            </li>
            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <span class="weui-mark-rt bg-blue">独播</span>
                <span class="weui-mark-rb">11-01 最新上线啦</span>
            </li>
            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <div class="weui-mark-vip"><span class="weui-mark-lt bg-orange" >自制剧</span></div>
                <span class="weui-mark-lb">更新到101集</span>
            </li>
            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <div class="weui-mark-vip"><span class="weui-mark-lt bg-red">会员免费</span></div>
            </li>

            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <span class="weui-mark-lb" style="bottom:5em">更新到101集</span>
                <span class="weui-mark-rt bg-red">3D</span>
                <div class="weui-mark-vip"><span class="weui-mark-lt bg-orange" >自制剧</span></div>
                <div class="weui-mark-meta">
                    <div class="weui-mark-title"><a href="javascript:;">斗罗大陆二绝世唐门斗罗大陆二绝世唐门斗罗大陆二绝世唐门</a></div>
                    <div class="weui-mark-desc">&nbsp;</div>
                </div>
            </li>

            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <span class="weui-mark-rt bg-red">用券</span>
                <div class="weui-mark-meta">
                    <div class="weui-mark-title"><a href="javascript:;">妖神记</a></div>
                    <div class="weui-mark-desc">妖神记3D制作</div>
                </div>
            </li>

            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <span class="weui-mark-lb" style="bottom:5em">32集全</span>
                <span class="weui-mark-rt bg-red">3D</span>
                <div class="weui-mark-vip"><span class="weui-mark-lt bg-orange" >自制剧</span></div>
                <div class="weui-mark-meta">
                    <div class="weui-mark-title"><a href="javascript:;">星辰变开播啦</a></div>
                    <div class="weui-mark-desc">全新上线动画制作</div>
                </div>
            </li>

            <li>
                <div class="weui-mark-img">
                    <img src="images/pic.jpg">
                </div>
                <span class="weui-mark-lb" style="bottom:5em">32集全</span>
                <span class="weui-mark-rt bg-red">用券</span>
                <div class="weui-mark-meta">
                    <div class="weui-mark-title"><a href="javascript:;">斗罗大陆</a></div>
                    <div class="weui-mark-desc">斗罗大陆合集权限上线欢迎点播!!!</div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 底部版权信息 -->
    <div class="weui-footer">
        <p class="weui-footer__links">
            <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
            <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
        </p>
        <p class="weui-footer__text">Copyright © 2008-2016</p>
    </div>

    <div style="height:55px;"></div>

    <!-- 导航 -->
    <div class="weui-tabbar weui-tabbar-flex">
        <a href="javascript:;" class="weui-tabbar__item">
            <i class="icon icon-27 f27 weui-tabbar__icon"></i>
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <span style="display: inline-block;position: relative;">
                <i class="icon icon-28 f27 weui-tabbar__icon"></i>
                <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
            </span>
            <p class="weui-tabbar__label">购物车</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
                <span style="display: inline-block;position: relative;">
                    <i class="icon icon-29 f27 weui-tabbar__icon"></i>
                    <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                </span>
            <p class="weui-tabbar__label">产品</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item ">
            <i class="icon icon-30 f27 weui-tabbar__icon" ></i>
            <p class="weui-tabbar__label">我的中心</p>
        </a>
    </div>

</body>
</html>